<template>
  <!-- 列设置 -->
  <el-drawer v-model="drawerVisible" size="450px" title="列设置">
    <div class="table-main">
      <el-table :border="true" :data="colSetting" default-expand-all row-key="prop" :tree-props="{ children: '_children' }">
        <el-table-column align="center" label="列名" prop="label" />
        <el-table-column v-slot="scope" align="center" label="显示" prop="isShow">
          <el-switch v-model="scope.row.isShow" />
        </el-table-column>
        <el-table-column v-slot="scope" align="center" label="排序" prop="sortable">
          <el-switch v-model="scope.row.sortable" />
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <!-- <img alt="notData" src="@/assets/images/notData.png" />
            <div>暂无可配置列</div> -->
            <el-empty description="暂无可配置列" />
          </div>
        </template>
      </el-table>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="ColSetting">
import { ref, watch } from 'vue'
import { ColumnProps } from '/@vab/components/ProTable/interface'

const props = defineProps<{ colSetting: ColumnProps[] }>()

const drawerVisible = ref<boolean>(false)

const openColSetting = () => {
  drawerVisible.value = true
}

watch(
  () => props.colSetting,
  (val) => {
    console.log(val)
  },
  { deep: true }
)

defineExpose({
  openColSetting,
})
</script>

<style scoped lang="scss">
.cursor-move {
  cursor: move;
}
</style>
